<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet"
	href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<title>vue</title>
<style>
th, td {
	text-align: center;
}

.anniu {
	margin: 0 5px;
}
</style>
</head>
<body>
	<div id="app">
		<!-- <table class="table table-striped table-hover">
			<tr>
				<th>ID</th>
				<th>姓名</th>
				<th>密码</th>
				<th>电话</th>
				<th>编辑</th>
			</tr>
			<tr v-for="product in  productList">
				<td>{{product.id}}</td>
				<td>{{product.name}}</td>
				<td>{{product.password}}</td>
				<td>{{product.phone}}</td>
				<td><button type="button" class="btn btn-info">编辑</button>&nbsp;&nbsp;&nbsp;
					<button type="button" class="btn btn-danger">删除</button></td>
			</tr>
		</table>
		<button v-on:click="pageHandler(pos-=pageSize,active=active-1)"
			type="button" class="btn btn-default">上一页</button>
		<button v-for="count in maxPage"
			v-on:click="pageHandler((count-1)*pageSize,count)" type="button"
			class="btn btn-default anniu"
			v-bind:class="{ active:active == count }">{{count}}</button>
		<button v-on:click="pageHandler(pos+=pageSize,active=active+1)"
			type="button" class="btn btn-default">下一页</button>

	</div> -->
	<div class="filter-container">
      
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        Add
      </el-button>
    </div>
		<el-table :data="productList" stripe style="width: 100%"> 
			<el-table-column prop="id" label="工号" width="180"> </el-table-column> 
			<el-table-column prop="name" label="名称" width="180"> </el-table-column> 
			<el-table-column prop="quantity" label="数量"> </el-table-column> 
			<el-table-column prop="number" label="编号"> </el-table-column>
			<el-table-column prop="category" label="类别"> </el-table-column>
			<el-table-column fixed="right" label="操作" width="200">
				<template slot-scope="scope"> 
					<el-button type="primary" @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
        			<el-button type="danger" @click="handledelete(scope.row)" size="small">删除</el-button>
      			</template>
   			 </el-table-column>
		</el-table>
		
		<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 30, 40]"
      :current-page.sync="currentPage"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" >
      <el-form ref="dataForm" :model="staff"    label-position="left" label-width="70px" style=	"width:400px; margin-left:50px;">
        <el-form-item v-if="dialogStatus=='create'" label="id" prop="title">
          <el-input v-model="staff.id"  />
        </el-form-item>
        <el-form-item label="名称" prop="title">
          <el-input v-model="staff.name" />
        </el-form-item>
        <el-form-item label="数量" prop="title">
          <el-input v-model="staff.quantity"/>
        </el-form-item>
        <el-form-item label="编号" prop="title">
          <el-input  v-model="staff.number"/>
        </el-form-item>
        <el-form-item label="类别" prop="title">
          <el-input  v-model="staff.category"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          	关闭
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          提交
        </el-button>
      </div>
    </el-dialog>
    
    </div>
		<script type="text/javascript">
		var vm = new Vue({
			el : '#app',
			data : {
				
				dialogStatus:"",
				 textMap: {
				        update: 'Edit',
				        create: 'Create'
				      },
				staff:{
					"id":"","name":"","quantity":"","number":"","category":""}
				,
				productList : [],
				pos : 0, //坐标
				pageSize : 10, //每一页显示的数据条数
				total : 150, //记录总数
				maxPage : 99,//最大页数
				active: 1,
				currentPage:1,
				dialogFormVisible:false
			},
			methods : {
				handleSizeChange(pageSizes){
					this.pageSize= pageSizes
					 this.pageHandler(0)
				},
				handleCurrentChange(currentPage){ 
					this.currPage = currentPage;
			        this.pageHandler((this.currPage-1)*this.pageSize)
			    },
			    createData(){
			    	 this.dialogFormVisible=true
			    	var url = "bookadd";
			    	var data="id="+this.staff.id+"&name="+this.staff.name+
			    	"&quantity="+this.staff.quantity+"&number="+this.staff.number
			    	+"&category="+this.staff.category;
			    	console.log(data);
			    	axios.post(url,data,{headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then(res =>{
			    		this.dialogFormVisible=false
			    		this.staff.id="";
				    	this.staff.name="";
				    	this.staff.quantity="";
				    	this.staff.number="";
				    	this.staff.category="";
				    	this.currentPage=1
						this.pageHandler(0)
					}).catch(err =>{
						console.log("error");
					})
			    },
			    handleCreate(){
			    	this.dialogFormVisible=true
			    	this.dialogStatus = 'create'
			    },
			    handleClick(row){
			    	this.dialogFormVisible=true
			    	this.dialogStatus = 'update'
			    	console.log(row);
			    	this.staff.id=row.id;
			    	this.staff.name=row.name;
			    	this.staff.quantity=row.quantity;
			    	this.staff.number=row.number;
			    	this.staff.category=row.category;
			    },
			    updateData(){
			    	console.log("修改")
			    	var url = "bookupdate";
			    	var data="id="+this.staff.id+"&name="+this.staff.name+
			    	"&quantity="+this.staff.quantity+"&number="+this.staff.number
			    	+"&category="+this.staff.category;
			    	console.log(data);
			    	axios.post(url,data,{headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then(res =>{
			    		this.dialogFormVisible=false
			    		this.currentPage=1
						this.pageHandler(0)
						this.staff.id="";
				    	this.staff.name="";
				    	this.staff.quantity="";
				    	this.staff.number="";
				    	this.staff.category="";
					}).catch(err =>{
						console.log("error");
					})
			    },
			    handledelete(row){
			    	var url = "bookdelete?id="+row.id;
					axios.get(url).then(res =>{
						this.currentPage=1
						this.pageHandler(0)
					}).catch(err =>{
						console.log("error");
					})
			    },
				//pagehandler方法 跳转到坐标
				pageHandler(pos) {	
					
					if(pos <= 0){
						pos = 0;
					}
					
					if(pos >= this.total){
						if(this.total%this.pageSize==0){
							console.log(this.total,pos);
							pos = this.total - this.pageSize;
						}else{
							console.log(this.total,pos);
							pos = this.total - this.total % this.pageSize;
						}
					}
					
					this.pos = pos;
					
					var url = "booklist?pos="+this.pos+"&rows="+this.pageSize;
					axios.get(url).then(res =>{
						this.productList = res.data.list;
						this.total = parseInt(res.data.total);
						this.maxPage =  Math.ceil(this.total / this.pageSize);
					}).catch(err =>{
						console.log("error");
					})
				}
			},
			created () {
				//created  表示页面加载完毕，立即执行
				this.pageHandler(0);
			},
			watch:{
				'dialogFormVisible':function(){
		              if(this.dialogFormVisible==false){
		            	  this.staff.id="";
					    	this.staff.name="";
					    	this.staff.phone="";
					    	this.staff.age="";
					    	this.staff.position="";
		              }
		          }
			}
		});
	</script>
</body>
</html>